<template>
  <div>
    <div class="title">题目：vue中常见的指令使用以及注意事项</div>
    <div>
      <h1>一、v-for中key的作用,用一个选中添加举例子说明</h1>
      <div class="vFor">1、没有key时demo</div>
      <div>
        <input type="text" v-model="name" />
        <button @click="add">添加</button>
      </div>
      <ul>
        <li v-for="(item, i) in list" :key='i'>
          <input type="checkbox" /> {{ item.name }}
        </li>
      </ul>
    </div>
    <div>
      <div class="vFor">2、使用key关键字时demo</div>
      <div>
        <input type="text" v-model="name" />
        <button @click="add">添加</button>
      </div>
      <ul>
        <li v-for="item in list" :key="item">
          <input type="checkbox" /> {{ item.name }}
        </li>
      </ul>
      <div>
        <div class="vFor">总结：</div>
        <p>
          1、v-for的使用:key为关键字，作用就是相当于唯一标识，因为虚拟DOM的Diff算法，key的作用主要是为了高效的更新虚拟DOM。
        </p>
        <p>2. 另外，若不设置key还可能在列表更新时引发一些隐蔽的bug</p>
        <p>
          3、
          vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分
          它们，否则vue只会替换其内部属性而不会触发过渡效果。
        </p>
        <p>
          4、为什么最好不要用index作为key？如果用index作为key，那么在删除第二项的时候，index就会从
          1 2 3 变成 1 2（因为index永远都是连续的，所以不可能是 1 3），那么 Vue
          依然会认为你删除的是第三项。也就是会遇到上面一样的 bug。
        </p>
      </div>
    </div>
    <div>
      <h1>二、v-for和v-if优先级</h1>
      <div>
        <div class="vFor">1、v-for和v-if同时使用，v-for优先于v-if被解析</div>
        <div id="demo">
          <p v-for="child in children" v-if="isFolder" :key="child">
            {{ child.title }}
          </p>
        </div>
      </div>
      <div>
        <div class="vFor">2、如何先解析v-if再解析v-for来节省性能</div>
        <div id="demo">
          <template v-if="isFolder">
            <p v-for="child in children" :key="child">{{ child.title }}</p>
          </template>
        </div>
      </div>
      <div>
        <div class="vFor">总结：</div>

        <p>1、v-for优先于v-if被解析</p>
        <p>
          2、如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能
        </p>
        <p>
          3、
          要避免出现这种情况，则在外层嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环
        </p>
        <p>
          4、如果条件出现在循环内部，可通过计算属性提前过滤掉那些不需要显示的项
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import HelloWorld from "../../components/HelloWorld";
export default {
  components: {
    HelloWorld,
  },

  data() {
    return {
      name: "",
      newId: 3,
      list: [
        { id: 1, name: "李斯" },
        { id: 2, name: "吕不韦" },
        { id: 3, name: "嬴政" },
      ],
      children: [{ title: "foo" }, { title: "bar" }],
    };
  },

  computed: {
    isFolder() {
      return this.children && this.children.length > 0;
    },
  },

  // mounted(){
  //   console.log(app.$options.render);
  // }
  methods: {
    add() {
      //注意这里是unshift
      this.list.unshift({ id: ++this.newId, name: this.name });
      this.name = "";
    },
  }
};
</script>

<style scoped>
.title {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translate(20%, 0);
}
.vFor {
  font-size: 18px;
  color: black;
}
</style>